<template>
    <div class="social-page">
        <div class="box unified-cursor-default flex unified-flex-align">
            <i class="el-icon-message icon email"></i>
            <div class="Indicate flex unified-flex-center unified-flex-align">
                <span>邮箱 Email <span class="status">未绑定</span></span>
                <span>可用于找回账号辅助</span>
            </div>

            <div>
                <el-button type="primary" round @click="clickBingEmail">点击绑定</el-button>
            </div>
        </div>

        <div class="box unified-cursor-default flex unified-flex-align unified-flex-space-between">
            <i class="el-icon-phone icon mobile"></i>
            <div class="Indicate flex unified-flex-center unified-flex-align">
                <span>手机 Phone <span class="status ">未绑定</span> </span>
                <span>可用于验证码登录，找回账号辅助</span>
            </div>

            <div>
                <el-button type="primary" round @click.stop="clickBindMobile">点击绑定</el-button>
            </div>

        </div>

        <div class="box unified-cursor-default flex unified-flex-align unified-flex-space-between">
            <i class="el-icon-phone icon mobile"></i>
            <div class="Indicate flex unified-flex-center unified-flex-align">
                <span>微信 Wechat <span class="status ">未绑定</span> </span>
                <span>可用于微信扫码登录，找回账号辅助</span>
            </div>

            <div>
                <el-button type="primary" round @click="clickBindWechat">点击绑定</el-button>
            </div>

        </div>


        <!-- 手机绑定 / 解绑弹窗 -->
        <div class="bindMobile flex unified-flex-align unified-flex-center" v-show="BindMobileShow">
            <div class="content">
                <div class="header">
                    <span>手机号验证</span>
                    <el-button type="primary" size="mini" @click="cancel('mobile')">取消</el-button>
                </div>
                <div class="inputMobile flex ">

                    <div class="flex">
                        <el-input :disabled="bindMobileForm.disabled" v-model="bindMobileForm.mobile"
                            placeholder="请输入手机号码"></el-input>
                        <el-button :disabled="bindMobileForm.disabled" type="primary" @click="sendMobileCode">
                            {{bindMobileForm.sumbitText}}</el-button>
                    </div>

                    <div class="flex">
                        <el-input v-model="bindMobileForm.code" :placeholder="'请输入' + bindMobileForm.codeNum +  '位验证码'"></el-input>
                        <el-button type="primary" @click="SumbitMobileCode">提交绑定</el-button>
                    </div>

                </div>

            </div>
        </div>
        <!-- 微信绑定 / 解绑弹窗 -->
        <div class="bindWechat  flex unified-flex-align unified-flex-center" v-show="BindWechatShow">

            <div class="content">
                <div class="header">
                    <span>微信绑定</span>
                    <el-button type="primary" size="mini" @click="cancel('wechat')">取消</el-button>
                </div>
                <div class="inputMobile flex ">

                    <div class="flex">
                        <el-input v-model="input" placeholder="请输入手机号码"></el-input>
                        <el-button type="primary">获取验证码</el-button>
                    </div>

                    <div class="flex">
                        <el-input v-model="input" placeholder="请输入6位验证码"></el-input>
                        <el-button type="primary">提交绑定</el-button>
                    </div>

                </div>

            </div>


        </div>
        <!-- 邮箱绑定 / 解绑弹窗 -->
        <div class="bindEmail  flex unified-flex-align unified-flex-center" v-show="BindEmailShow">

            <div class="content">
                <div class="header">
                    <span>邮箱绑定</span>
                    <el-button type="primary" size="mini" @click="cancel('email')">取消</el-button>
                </div>
                <div class="inputMobile flex ">
                    <div class="flex">
                        <el-input :disabled="bindEmailForm.disabled" v-model="bindEmailForm.email"
                            placeholder="请输入邮箱地址"></el-input>
                        <el-button :disabled="bindEmailForm.disabled" type="primary">{{bindEmailForm.sumbitText}}
                        </el-button>
                    </div>
                    <div class="flex">
                        <el-input v-model="input" :placeholder=" '请输入' + bindEmailForm.codeNum +  '位验证码'"></el-input>
                        <el-button type="primary">提交绑定</el-button>
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'

    export default {
        computed: {
            ...mapState(['loginUserInfo'])
        },

        data() {

            return {
                api: this.$api.bind,
                BindMobileShow: false,
                BindWechatShow: false,
                BindEmailShow: false,
                // 绑定手机号表单
                bindMobileForm: {
                    mobile: "", // 手机号码
                    code: "", // 验证码
                    countDown: 60, // 倒计时
                    sumbitText: "获取验证码",
                    disabled: false, // 手机号码输入框 和 获取验证码按钮 禁止状态    
                    codeNum: 6 ,// 验证码长度
                    again:60    // 重新发送间隔
                },
                // 绑定邮箱表单
                bindEmailForm: {
                    email: "", // 邮箱号
                    code: "", // 验证码
                    countDown: 60, // 倒计时
                    sumbitText: "获取验证码",
                    disabled: false, // 邮箱号码输入框 和 获取验证码按钮 禁止状态     
                    codeNum: 6 ,// 验证码长度
                    again:60    // 重新发送间隔
                }
            }
        },
        methods: {
            // 弹窗点击取消
            cancel(mo) {

                switch (mo) {

                    case "mobile":

                        this.BindMobileShow = false
                        break;

                    case "email":
                        this.BindEmailShow = false
                        break;

                    case "wechat":
                        this.BindWechatShow = false
                        break;
                }

            },

            // 点击绑定微信
            clickBindWechat() {

                this.BindMobileShow = false
                this.BindEmailShow = false
                this.BindWechatShow = true

            },
            // 点击绑定邮箱
            clickBingEmail() {
                this.BindMobileShow = false
                this.BindWechatShow = false
                this.BindEmailShow = true
            },
            // 点击绑定手机
            clickBindMobile() {
                this.BindWechatShow = false
                this.BindEmailShow = false
                this.BindMobileShow = true
            },
            // 手机发送验证码
            sendMobileCode() {
                if (!this.loginUserInfo._id) {
                    this.$message.error("用户未登录或异常")
                } else if (!this.bindMobileForm.mobile) {
                    this.$message.error("手机号码不能为空")
                } else if (this.bindMobileForm.mobile.length != 11) {
                    this.$message.error("手机号码格式不正确")
                } else {
                    this.$axios({
                        url: this.api,
                        method: "POST",
                        data: {
                            action: "get",
                            params: {
                                mobile: this.bindMobileForm.mobile,
                                user: this.loginUserInfo._id,
                                type: 1,
                                effect: 2
                            }
                        }
                    }).then(res => {
                        if (res.data.code == 0) {
                            this.$message.success(res.data.msg)
                            // 将输入框禁止
                            this.bindMobileForm.disabled = true
                            let timeout = setInterval(() => {
                                if (this.bindMobileForm.countDown <= 0) {
                                    clearInterval(timeout)
                                    this.bindMobileForm.sumbitText = "获取验证码"
                                    this.bindMobileForm.disabled = false
                                } else {
                                    this.bindMobileForm.sumbitText = "再次获取（" + this.bindMobileForm.countDown + ")"
                                    this.bindMobileForm.countDown--
                                }
                            }, 1000)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            },
            // 提交绑定验证码
            SumbitMobileCode() {
                if (!this.loginUserInfo._id) {
                    this.$message.error("用户未登录或异常")
                } else if (!this.bindMobileForm.mobile) {
                    this.$message.error("手机号码不能为空")
                } else if (this.bindMobileForm.mobile.length != 11) {
                    this.$message.error("手机号码格式不正确")
                } else if (!this.bindMobileForm.code) {
                    this.$message.error("验证码不能为空")
                } else if (this.bindMobileForm.code.length != 6) {
                    this.$message.error("验证码格式不正确")
                } else {
                    this.$axios({
                        url: this.api,
                        method: "POST",
                        data: {
                            action: "sumbit",
                            params: {
                                mobile: this.bindMobileForm.mobile,
                                user: this.loginUserInfo._id,
                                code: this.bindMobileForm.code,
                                type: 1,
                                effect: 2
                            }
                        }
                    }).then(res => {
                        console.log(res);
                    }).catch(err => {
                        console.log(err);
                    })
                }






            }





        }

    }
</script>

<style scoped="scoped">
    .social-page {
        width: 100%;
        height: 100%;
        position: relative;
        padding-top: 35px;
        box-sizing: border-box;
    }

    .box {
        padding: 0px 25px;
        box-sizing: border-box;
        width: 90%;
        margin: 0px auto;
        margin-bottom: 25px;
        height: 105px;
        border: 1px solid #c3c3c344;
        border-radius: 15px;
    }



    .Indicate {
        flex: 1;
        height: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .Indicate span:nth-child(2) {
        font-size: 12px;
        color: #555555;
        margin-top: 8px;
    }

    .icon {
        font-size: 30px;
        color: #C3C3C3;
        margin-right: 20px;
    }

    .email,
    .mobile {
        color: #2269F3;
    }

    .status {
        margin-left: 10px;
        font-size: 8px;
        text-decoration: underline;
        color: #2269F3;
    }

    .bindWechat,
    .bindEmail,
    .bindMobile {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #33333344;
        top: 0px;
        left: 0;
    }

    .content {
        width: 80%;
        height: 80%;
        background-color: #fff;
        z-index: 10;
        border-radius: 10px;
    }

    .header {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #C3C3C344;
        line-height: 60px;
        letter-spacing: 1px;
        padding: 0px 15px;
        box-sizing: border-box;
    }


    .inputMobile {
        flex-direction: column;
    }
</style>
